<template>
  <div class="box">
    <h1 ref="myh1">我的Vue项目</h1>
    <div ref="main" class="main">
      <Left ref="leftRef"></Left>
      <Right></Right>
    </div>
  </div>
</template>

<script>
// 导入Left、Right组件，并注册

import Left from './components/Left.vue'
import Right from './components/Right.vue'

export default {
  // 注册组件
  components: {
    Left: Left,
    Right: Right
  },
  // mounted，表示页面渲染之后，执行的生命周期函数
  // 最早，也要在mounted里面，才能操作页面元素
  mounted() {
    // console.log(this)
    this.$refs.myh1.style.color = 'red'
    // console.log(this.$refs.leftRef) // 这样就可以得到子组件对象了，当然也可以调用子组件的方法和data数据
    this.$refs.leftRef.add() // 调用子组件的方法
    this.$refs.leftRef.age = 30 // 修改子组件的数据
  }
}
</script>

<style lang="less" scoped>
.box {
  background-color: cornflowerblue;
  padding: 20px;
  .main {
    display: flex;
    > div {
      flex: 1;
      min-height: 300px;
      margin: 10px;
      padding: 10px;
    }
  }
}
</style>
